<template>
  <div id="homeHeader" class="clearfix">
    <ul class="chat">
      <li class="line">
        <div class="title">{{ new Date() | formatDateTimePeriod }}</div>
      </li>
      <li v-for="(item, i) in contents" :key="i">
        <div class="message">{{ item.message }}</div>
        <div class="info">
          <div class="datetime">{{ item.date | formatDateTimeMessage }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Content",
  props: ["Contents"],
  data() {
    return {
      date: new Date(),
      contents: [],
    };
  },
  filters: {
    formatDateTimeMessage(value) {
      let date = new Date(value);
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return h + ":" + m + ":" + s;
    },
    formatDateTimePeriod(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "年" + MM + "月" + d + "日";
    },
  },
  beforeDestroy() {},
  watch: {
    Contents: {
      //深度监听，可监听到对象、数组的变化
      handler(value) {
        this.contents = value;
      },
      deep: true, //true 深度监听
    },
  },
};
</script>

<style lang="less" scoped>
#homeHeader {
  height: 600px;
  width: 650px;
  background-color: rgba(242, 242, 242);
  border: 1px solid rgba(228, 231, 237, 1);
  overflow-y: scroll;
}
ul.chat {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  background-color: rgba(242, 242, 242);

  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
ul.chat > li {
  padding: 0 20px;
  padding-right: 20%;
  margin-bottom: 10px;
}
ul.chat > li .message {
  background-color: rgba(167, 210, 249);
  border-radius: 3px;
  padding: 15px;
  font-size: large;
}
ul.chat > li .info {
  padding: 5px 0;
  font-size: 0.85em;
  color: #8d9293;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
ul.chat > li .info > * {
  margin-right: 10px;
}
ul.chat > li.right {
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding-left: 20%;
  padding-right: 20px;
  text-align: right;
}
.ul.chat > li.right .message {
  text-align: left;
}
ul.chat > li.right .info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
ul.chat > li.right .info > * {
  margin-left: 10px;
  margin-right: 0px;
}
ul.chat > li.line {
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 0.9em;
  z-index: 2;
  padding-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #8d9293;
}
ul.chat > li.line .title {
  background-color: #fff;
  position: relative;
  z-index: 2;
  width: 140px;
  margin: 0 auto;
}
ul.chat > li.line:after {
  content: "";
  position: absolute;
  width: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  border-bottom: 1px solid #dfe6e8;
}
</style>
